import { defineConfig, loadEnv } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'
import vue from '@vitejs/plugin-vue'
// 导入 jsx
import vueJsx from '@vitejs/plugin-vue-jsx'
// 自动导入插件：可以直接使用 ref watch reactive 等组合 API 会自动导入
// 安装 npm install unplugin-auto-import -D
// 导入 注意版本 /vite
import autoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/

export default defineConfig({
  // 挂载插件
  plugins: [
    // 配置 vite 的插件 vue
    vue({
      // 设置响应式语法糖为开启
      reactivityTransform: true,
      // 配置 template 的编译器选项，将包含特定字符串('my-')的标签识别为自定义标签
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('my-')
        }
      }
    }),
    vueJsx(),
    visualizer({ open: true }),
    autoImport({
      // 调用函数进行挂载，函数参数为配置对象
      // 需要使用自动导出的模块
      imports: ['vue'],
      // 声明文件的路径
      dts: 'src/auto-import.d.ts'
    })]
})

// 访问环境变量形式
// export default ({ mode }: any) => {
//   console.log(loadEnv(mode, process.cwd()))
//   return defineConfig({
//     // 挂载插件
//     plugins: [
//       // 配置 vite 的插件 vue
//       // 设置响应式语法糖为开启
//       vue({ reactivityTransform: true }),
//       vueJsx(),
//       autoImport({
//         // 调用函数进行挂载，函数参数为配置对象
//         // 需要使用自动导出的模块
//         imports: ['vue'],
//         // 声明文件的路径
//         dts: 'src/auto-import.d.ts'
//       })]
//   })
// }
